import React from 'react'
import {Input, Row, Col, InputNumber, Select, DatePicker, Form} from 'antd'
import styles from './../youkee.less'
const FormItem = Form.Item;

//高级搜索的表单中的数值类型字段(大于、小于、等于)
class NumCompare extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            name: props.name,
            label: props.label,
            text: props.text,
            handle: props.handle,
            val: {
                gt: '',
                lt: '',
                eq: ''
            }
        };
        this.gtChange = this.gtChange.bind(this);
        this.ltChange = this.ltChange.bind(this);
        this.eqChange = this.eqChange.bind(this);
        this.reset = this.reset.bind(this);
    }

    gtChange (value) {
        var val = this.state.val;
        val.eq = '';
        val.gt = value || '';

        this.setState({val: val});
        this.state.handle(this.state.name, val);
    }

    ltChange (value) {
        var val = this.state.val;
        val.eq = '';
        val.lt = value || '';
        this.setState({val: val});
        this.state.handle(this.state.name, val);
    }

    eqChange (value) {
        var val = this.state.val;
        val.eq = value || '';
        val.lt = '';
        val.gt = '';
        this.setState({val: val});
        this.state.handle(this.state.name, val);
    }

    reset () {
        var val = this.state.val;
        val.eq = '';
        val.lt = '';
        val.gt = '';
        this.setState({val: val});
        this.state.handle(this.state.name, val);
    }

    render () {
        var text = this.state.text;
        return (
            <div>
                <label className={styles.uk_label}>{this.state.label}:</label>
                <Row>
                    <Col span={8}>
                        <FormItem
                            labelCol={{span: 5}}
                            wrapperCol={{span: 19}}
                            label={'>'}
                            style={{marginBottom: '5px'}}
                        >
                            <InputNumber min={1} value={this.state.val.gt} placeholder={text} onChange={this.gtChange}/>
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem
                            labelCol={{span: 5}}
                            wrapperCol={{span: 19}}
                            label={'<'}
                            style={{marginBottom: '5px'}}
                        >
                            <InputNumber min={1} value={this.state.val.lt} placeholder={text} onChange={this.ltChange}/>
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem
                            labelCol={{span: 5}}
                            wrapperCol={{span: 19}}
                            label={'='}
                            style={{marginBottom: '5px'}}
                        >
                            <InputNumber min={1} value={this.state.val.eq} placeholder={text} onChange={this.eqChange}/>
                        </FormItem>
                    </Col>
                </Row>
            </div>
        );
    }
}
//高级搜索的表单中的下拉多选字段(用于选项多于3个时)
class SelectGroup extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            name: props.name,
            label: props.label,
            multiple: props.multiple || false,
            handle: props.handle,
            val: []
        };
        this.changeHandle = this.changeHandle.bind(this);
        this.reset = this.reset.bind(this);
    }

    changeHandle (value) {
        let dataType = this.props.dataType
        this.setState({val: value});

        if(dataType === 'number'){
            if((value instanceof Array) && value.length>0){
                this.state.handle(this.state.name, value.map(x => parseInt(x)));
            }else if((typeof value === 'string') && value.length>0){
                this.state.handle(this.state.name, parseInt(value));
            }else{
                this.state.handle(this.state.name, null);
            }
        }else{
            this.state.handle(this.state.name, value);
        }
    }

    reset () {
        this.setState({val: []});
        this.state.handle(this.state.name, null);
    }

    render () {
        var {options} = this.props;
        let idVal = 'area' + Math.random();

        if(!(options instanceof Array)){
            return null;
        }

        return (
            <div style={{position: 'relative'}} id={idVal}>
                <label className={styles.uk_label}>{this.state.label}:</label>
                <Row className={styles.uk_mgb_24}>
                    <Col span={24}>
                        <Select
                            multiple={this.state.multiple}
                            name={this.state.name}
                            style={{width: '100%'}}
                            value={this.state.val}
                            placeholder={this.state.label}
                            onChange={this.changeHandle}
                            getPopupContainer={() => document.getElementById(idVal)}
                        >
                            {options.map(function (item, key) {
                                return <Select.Option key={key + ''} value={item.value + ''}>{item.text}</Select.Option>
                            })}
                        </Select>
                    </Col>
                </Row>
            </div>
        );
    }
}
//高级搜索的表单中的文本字段
class TextInput extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            name: props.name,
            label: props.label,
            text: props.text,
            handle: props.handle,
            val: ''
        };
        this.changeHandle = this.changeHandle.bind(this);
        this.reset = this.reset.bind(this);
    }

    changeHandle (e) {
        this.setState({val: e.target.value});
        // this.state.handle(this.state.name, {like: e.target.value});
        this.state.handle(this.state.name, e.target.value);
    }

    reset () {
        this.setState({val: ''});
        this.state.handle(this.state.name, '');
    }

    render () {
        return <div>
            <label className={styles.uk_label}>{this.state.label}:</label>
            <Row className={styles.uk_mgb_24}>
                <Col span={24}>
                    <Input name={this.state.name} value={this.state.val} placeholder={this.state.text}
                           onChange={this.changeHandle}/>
                </Col>
            </Row>
        </div>
    }
}
//高级搜索的表单中的日期类型字段(之前、之后、当前)
class DateCompare extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            name: props.name,
            label: props.label,
            options: props.options,
            handle: props.handle,
            optData: {
                from: null,
                end: null,
            },
            val: {
                from: '',
                end: '',
            }
        };
        this.fromChange = this.fromChange.bind(this);
        this.endChange = this.endChange.bind(this);
        this.reset = this.reset.bind(this);
    }

    fromChange (date, dateString) {
        var optData = this.state.optData;
        optData.eq = null;
        optData.from = date;

        var val = this.state.val;
        val.from = dateString || '';

        this.setState({optData: optData, val: val});
        this.state.handle(this.state.name, val);
    }

    endChange (date, dateString) {
        var optData = this.state.optData;
        optData.end = date;


        var val = this.state.val;
        val.end = dateString || '';
        this.setState({optData: optData, val: val});
        this.state.handle(this.state.name, val);
    }

    /*eqChange (date, dateString) {
     var optData = this.state.optData;
     optData.eq = date;
     optData.end = null;
     optData.from = null;

     var val = this.state.val;
     val.eq = dateString || '';
     val.end = '';
     val.from = '';
     this.setState({optData: optData, val: val});
     this.state.handle(this.state.name, val);
     }*/

    reset () {
        var optData = this.state.optData;
        optData.end = null;
        optData.from = null;

        var val = this.state.val;
        val.end = '';
        val.from = '';
        this.setState({optData: optData, val: val});
        this.state.handle(this.state.name, val);
    }

    render () {
        var optData = this.state.optData;
        var options = this.state.options;
        return (
            <div>
                <label className={styles.uk_label}>{this.state.label}:</label>
                <Row>
                    <Col span={12}>
                        <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px', paddingRight:'5px'}}>
                            <DatePicker onChange={this.fromChange} value={optData.from} placeholder={options[0].text} size={'small'} style={{width:'100%'}} />
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px', paddingLeft:'5px'}}>
                            <DatePicker onChange={this.endChange} value={optData.end} placeholder={options[1].text} size={'small'} style={{width:'100%'}} />
                        </FormItem>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default {
    NumCompare,
    SelectGroup,
    DateCompare,
    TextInput,
}
